<template>
	<view class="">
		<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-fixed="false" :is-back="false"
			:background="background" :back-text-style="{color: '#fff'}" back-icon-name="nav-back">
			<view class="slot-wrap">
				<view class="search-wrap">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model="keyword" :show-action="false" height="56" :action-style="{color: '#fff'}" />
				</view>

			</view>
		</u-navbar>
		<view class="u-tabs-box">
			<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
				:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<view class="wrap">
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<!-- 已下单 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view v-if="list0.length === 0" class="empty">
							<u-empty mode="order"></u-empty>
						</view>
						<order-box @fatherMethod="fatherMethod" v-else v-for="order in list0" :orderItem="order">
						</order-box>

					</scroll-view>
				</swiper-item>
				<!-- 待付款 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view v-if="list1.length === 0" class="empty">
							<u-empty mode="order"></u-empty>
						</view>
						<order-box v-else v-for="order in list1" :orderItem="order">
						</order-box>

					</scroll-view>
				</swiper-item>
				<!-- 已完成 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view v-if="list2.length === 0" class="empty">
							<u-empty mode="order"></u-empty>
						</view>
						<order-box @fatherMethod="fatherMethod" v-else v-for="order in list2" :orderItem="order">
						</order-box>

					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import orderBox from '../user/orderBox.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		getOrderList,
		deleteOrderById
	} from "../../../api/user/user";
	export default {
		components: {
			orderBox
		},
		data() {
			return {
				orderList: [],
				list0: [],
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				list5: [],
				list6: [],
				list7: [],
				list8: [],
				list: [{
					name: '已下单'
				}, {
					name: '未付款'
				}, {
					name: '已完成'
				}],
				tabs: [
					'正在进行中的订单',
					'已完成的订单',
					'已取消的订单'
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				loadStatus: ['loadmore', 'loadmore'],
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				keyword: '',
				page: 1
			};
		},
		computed: {
			...mapGetters([
				'userID',
				'driverOrderList',
				'nickName'
			])
		},
		created() {
			// 获取订单信息
			this.list0 = []
			this.list1 = []
			this.list2 = []
		},
		mounted() {
			// this.getOrder()
		},
		methods: {
			fatherMethod(oid) {
				deleteOrderById(oid).then(res => {
					console.log(res)
					if (res && res.header.code == 200) {
						console.log(1)
						uni.showToast({
							title: "删除成功",
							icon: "success",
							duration: 2000
						});
						setTimeout(() => {
							console.log(2)
							this.getOrder();
						}, 2000)

					}
				});

			},
			getOrder() {
				this.list0 = []
				this.list1 = []
				this.list2 = []
				this.showLoading();
				getOrderList({
					'current': 1,
					'size': 9999,
					'userId': this.userID
				}).then(res => {
					this.orderList = res.body
					console.log(res.body)
					res.body.forEach((item, index) => {
						if (item.orderState == 0) {
							this.list0.push(item)
						}
						if (item.orderState == 1) {
							this.list2.push(item)
						}
						if (item.orderState == 2) {
							this.list0.push(item)
						}
						if (item.orderState == 3) {
							this.list0.push(item)
						}
						if (item.orderState == 4) {
							this.list1.push(item)
						}
						if (item.orderState == 5) {
							this.list2.push(item)
						}
						if (item.orderState == 6) {
							this.list2.push(item)
						}
						if (item.orderState == 7) {
							this.list2.push(item)
							console.log(this.list7)
						}
						if (item.orderState == 8) {
							this.list2.push(item)

						}
					})
					this.hideLoading();
				})
				this.hideLoading();
			},
			showLoading: function() {
				uni.showLoading({
					title: 'loading'
				});

				// #ifdef MP-ALIPAY
				this._showTimer && clearTimeout(this._showTimer);
				this._showTimer = setTimeout(() => {
					this.hideLoading();
				}, 3000)
				// #endif
			},
			hideLoading: function() {
				uni.hideLoading();
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;

			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		height: 100rpx;

		.search-wrap {
			margin: 0 20rpx;
			flex: 1;
		}

		.navbar-right {
			margin-right: 24rpx;
			display: flex;

			.message-box {}

			.right-item {
				margin: 0 12rpx;
				position: relative;
				color: #ffffff;
				display: flex;
			}
		}
	}

	.u-tabs-box {
		position: fixed;
		left: 0;
		right: 0;
		top: 140rpx;
		height: 95rpx;
		z-index: 990;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(80vh - var(--window-top));
		width: 100%;
		margin-top: calc(80rpx);
		overflow: hidden;

	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;

		.page-box {
			display: flex;
			align-items: center;
			justify-items: center;

			.empty {
				margin: 50% auto;
			}
		}
	}
</style>
